<template>
  <el-row class="bgf">
    <el-col :span="12" :offset="5">
      <el-form label-width="100px" :model="forminfo" :rules="rules" ref="forminfo">
        <el-form-item label="角色名称" prop="rolename">
          <el-input v-model="forminfo.rolename"></el-input>
        </el-form-item>
        <el-form-item label="权限">
          <!-- 树形控件 树形菜单，树形权限！-->
          <el-tree
            ref="tree"
            :data="menulist"
            show-checkbox
            node-key="id"
            :check-strictly="isStrictly"
            :props="{label:'title',children:'children'}"
            default-expand-all
          ></el-tree>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio v-model="forminfo.status" :label="1">正常</el-radio>
          <el-radio v-model="forminfo.status" :label="0">禁用</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-if="!$route.params.id" @click="submit">立即添加</el-button>
          <el-button type="success" v-else @click="submit">立即修改</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
// 如何区分是添加还是修改页面！
// 根据路由是否传入的 动态参数！ this.$route.params.id 修改！
import { getMenu } from "@/request/menu";
import { addRole, editRole, getRole } from "@/request/role";

let defaultInfo = {}; // 修改的时候的重置！
export default {
  data() {
    return {
      forminfo: {
        rolename: "", // 角色名称
        menus: [], // 权限数组
        status: 1
      },
      rules: {
        // 表单的验证规则
        rolename: [
          { required: true, message: "角色名称必须写", trigger: "blur" }
        ]
      },
      menulist: [], //菜单数据,用于树形权限
      isStrictly:false  // 不是严格模式， 父子是关联的。 父点击了子全部选中，子点击了父也会被勾中
    };
  },
  created() {
    this.getlist(); // 获取列表
    if (this.$route.params.id) {
      // 获取修改的这一条的数据，赋给表单！
      this.getinfo(this.$route.params.id);
    }
  },
  methods: {
    async getlist() {
      // 获取树形菜单数据！
      this.menulist = await getMenu();
    },
    async getinfo(id) {
      // 获取修改数据，赋给表单！
      this.forminfo = await getRole(id);
      // 设置树形控件，选择相关数据信息！
      let menus = this.forminfo.menus.split(",");
      // 设置为树形控件严格模式，父子互不关联！  
      this.isStrictly = true;
      // 等到树形控件严格模式渲染更新完成之后，再去设置数据！
      this.$nextTick(()=>{
          // 回显数据！设置对应显示的！ 严格模式！
          this.$refs.tree.setCheckedKeys(menus);  
          // 非严格模式！
          this.isStrictly = false;
      })
      // 赋给一个临时变量，用于重置的时候再次赋值！
      defaultInfo = { ...this.forminfo };
    },
    submit() {
      // 提交数据 【添加、修改】
      this.$refs.forminfo.validate(async isok => {
        if (isok) {
          // 发送请求！
          let res;
          // this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys()) ;
          // 获取 获取树形控件的数据！（选中的节点以及父级节点）
          this.forminfo.menus = this.$refs.tree
            .getCheckedKeys()
            .concat(this.$refs.tree.getHalfCheckedKeys());
          if (this.$route.params.id) {
            this.forminfo.id = this.$route.params.id; // 给表单数据添加上id
            res = await editRole(this.forminfo); // 修改请求
          } else {
            res = await addRole(this.forminfo); // 添加请求
          }
          if (res) {
            this.$router.back();
          }
        } else {
          this.$message.warn("验证不通过");
        }
      });
    },
    reset() {
      // 重置
      // resetFields表单重置！
      if (this.$route.params.id) {
        // 修改重置
        this.forminfo = { ...defaultInfo };
        // 设置树形控件，选择相关数据信息！
        let menus = this.forminfo.menus.split(",");
        // 设置为树形控件严格模式，父子互不关联！  
        this.isStrictly = true;
        // 等到树形控件严格模式渲染更新完成之后，再去设置数据！
        this.$nextTick(()=>{
            // 回显数据！设置对应显示的！ 严格模式！
            this.$refs.tree.setCheckedKeys(menus);  
            // 非严格模式！
            this.isStrictly = false;
        })
      } else {
        // 添加重置
        this.$refs.forminfo.resetFields();
        this.$refs.tree.setCheckedKeys([]);
      }
    }
  },
  components: {}
};
</script>
<style scoped>
</style>